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GETTING STARTED 


Getting Started 


CSS continues to evolve as a language, and as it does it gives us a greater abil- 
ity to create with code. Transforms, transitions, and CSS animations are good 
examples of things we could create only in graphics and animation editors. The 
file size of a few lines of code is measured in bytes. The size of a file containing 
a moving graphic is measured in megabytes and requires an additional request 
to the server. For the sake of performance, look first to doing things with code. 


The recent design trend has been to remove signals of depth and other details 
used to mimic realistic objects on the screen. Unfortunately, some of those 
details also serve a purpose in communicating information in websites and 
web apps. Motion is replacing depth as the way to communicate what’s been 
removed and adding back delight in a way that’s more in tune with the fluid 
and dynamic nature of the web. 


This book will start you on your path to adding motion to your designs. It will 
show you how to work with transforms, transitions, and CSS animations in 
modern browsers, and it will show you how to make changes to CSS proper- 
ties over time instead of instantly. 


The basics covered in this book will help you understand how to create more 
realistic animation and present some practical examples you can apply to the 
websites you design and develop. 


What's Inside This Book 


Animation is about showing changes over time. We'll look at some of the 
things we can change, namely CSS transforms. Transforms give us the ability 
to modify things like the size and position of an element. They do this in a way 
that doesn’t interrupt the document flow. In other words, when the element 
changes, other elements on the page don’t react. They treat the transformed 
element as though it were still in the original state. 


Most changes to the elements of a website happen instantly. Mouse over a 
button, and it immediately changes color. Mouse out, and the color reverts 
back, again instantly. Changes that happen instantaneously aren't very realis- 
tic, which is where transitions come in. We'll use transitions to alter the time 


over which these changes occur so they appear more natural. Subtle changes 
will add a touch of realism and not be so jarring. 


Transitions have a couple of limitations. First, they occur in response to some 
action, such as hovering over an element. We can’t initiate a transition with- 
out some interaction by a site visitor. Second, you have only a single starting 
point and a single end point. 


CSS animation isn’t bound by either of these limitations. You can set an ani- 
mation to start on its own (or in response to user action). Using keyframes, 
you can add as many or as few points between the beginning and end where 
you can make additional changes. 


At times, you'll want to use transitions and at other times you'll prefer anima- 
tion. Pll mention some of these throughout the book. 


Once you understand how to work with transforms, transitions, and anima- 
tions, and have some idea when to use them in real-world projects, we'll take 
a look at the real world again and think about how you can make your ani- 
mation more realistic. 


A Note About Images and Examples 


One limitation of print is that it’s static. We won't be able to show actual transi- 
tions and animations in this book. The figures in this book show before, after, 
and during moments and describe the movement. 


However, every example presented in this book has a corresponding live exam- 
ple, which you can download, experiment with, and use. Each example is iden- 
tified by number in the text, and you can view each in action as a demo to see 
what's being discussed or as a way to double-check your code. 


How to Download Code and Example Files 


Along with the examples, you'll be able to download all the code used in this book. 
1. Go to www.peachpit.com/register and create or log in to your account. 
2. Enter the book’s ISBN (978-0-133-98050-9), and click Submit. 


3. On the My Registered Products tab of your account, you should see this 
book listed. 
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Who Is This Book For? 


We assume that you've picked up this book because youre interested in learn- 
ing about animating web pages. You should already know how to build web 
pages and websites. You might be new to web design, or perhaps you've been 
developing websites for years. As long as you can create an HTML document 
and know how to work with CSS, you'll be able to follow along and work 
through the examples. 


Knowing—or at least being able to read—JavaScript will be helpful, although 
not necessary. Some of the examples in this book use JavaScript to read and 
modify the CSS properties of some HTML elements. The scripts are short and 
not too difficult to understand. I'll explain each when you encounter them. 


Most importantly, you should use your imagination. You can combine the 
things you learn in this book in multiple ways to create a variety of effects. I 
can show you only so many in one book. I'll point you to resources for more 
examples, but you'll get the most from this book if you experiment on your 
own and see what effects you can create. 


How Do You Use This Book? 


We designed this book to be used in a couple of ways. Naturally you should 
read through the text as you would any book. The text will present new infor- 
mation and help you understand it. Just as important are the examples accom- 
panying the text. 


You'll get more from this (or any technical book) by typing the code in a text 
editor. Open your favorite code editor or grab one from the list in the follow- 
ing section. Open a few browsers (you should have as many available as pos- 
sible). Then start coding and checking to see how your code works. 


Type the example code, and modify it. Typing will reinforce everything you 
read and will help you develop the muscle memory so you can write it on 
your own. Remember to use your imagination. Modify the example code, and 
observe what happens. 


In code listings throughout the book, a single line of code onscreen might wrap 
to two lines in the book. If this happens, the continued line will start with an 
arrow, so it might look like this: 


The beginning of the code starts here, 
but it continues on this line. 


Code that you should type or modify or that you should pay particular atten- 
tion to appears highlighted. 
-webkit-transform: translateY(Opx) scale(1,1) ; 
-ms-transform: translateY(Opx) scale(1,1); 
transform: translateY(Opx) scale(1,1); 
You'll find step-by-step instructions to show you how to complete a process. 


Note that instruction appears as the numbered step, and a description follows 
it, like this: 


1. Adda div to your HTML with a class of ball and wrap another div with 
a class of stage around it. 
<div class="stage"> 
<div class="ball"></div> 


</div> 


The reason for the .stage div is to provide a frame for the animation. 
Because you and I are probably looking at browsers open to different widths 
and heights, it would be hard to use the browser’s edge as the thing the ball 
bounces against. By creating a stage for the ball, we can including it in the 
animation and make it more likely we're both seeing the same thing. 


Each example that has a matching file containing all the code is identified in 
the text: 


We'll get to those functions momentarily, but for now let’s take a look at a sim- 
ple example showing a transform (EXAMPLE 2.1). 


GETTING STARTED 


xiii 


xiv 


GETTING STARTED 





Tools Required 


Although tools like Adobe’s Edge Animate or Tumult’s Hype 2 can create ani- 
mation for us, we won't be using them in this book. We won't be using Photo- 
shop or Maya or any other tool that can create movement. These are all great 
tools, but we're going to create movement by writing code. 


That means that the tool requirements are minimal and you should already 
have everything you need. You'll need a code editor, a modern browser, and 
working knowledge of HTML and CSS. Oh, and bring your imagination. 


If you build websites with any regularity, you probably have a favorite code 
editor, and youre free to use it. In the following sections, you'll find a few you 
can try if you don't yet have a favorite or just want to try a few new ones. All 
the editors listed can be downloaded and used for free. 


ll be using Adobe Brackets (http://brackets.io). This is an Adobe book after 
all, but that’s not the only reason for using it. Brackets is free and open source 
under an MIT license. 


.wall { 
position: absolute; 
width: 5Opx; 


} 
index 
main 59 .stopper { 

position: absolute; 
width: 10@px; 
height: 5@px; 

top: 580px; 

left: 375px; 
background: #f00; 


quick-edit 


sball { 
background: #f00; 
position: absolute; 
z-index: 10; 
top: SOpx; 
left: 100px; 


width: @px; 

height: Opx; 

border-width: S@px; 

border-style: solid; 

border-color: #393 #933 #399 #993; 
border-radius: 50%; 


-webkit-animation: bounce 2s ease-in-out both; 
animation: bounce 2s ease-in-out both; 


} 


@-webkit-keyframes bounce { 


0% { 
-webkit-transform: translateX(®) translateY(@px) scale(1,1) rotate(98deg) 
-ms-transform: translateXx(®) translateY(@px) scale(1,1) rotate(90deg) ; 
transform: translatex(®) translateY(@px) scale(1,1) rotate(9@deg); 
} 


15% { 
-webkit-transform: translateX(-160px) translateY(®px) scale(1,1) rotate(-9edeg); 
-ms-transform: translatex(-19@px) translateY(Opx) scale(1,1) rotate(-9edeg) ; 
transform: translatex(-100px) translateY(@px) scale(1,1) rotate(-9edeg) ; 


Line, Column. INS HTML 
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Brackets isn’t limited to running on a single platform. It works on Windows, 


Mac, and Linux, so if you switch operating systems between home and work, 


you can still use it. It has some additional features such as live reload, so you 


don't have to keep refreshing your browser to see the effect of your changes. 


Brackets can be extended and already has an active community building exten- 


sions for it. Brackets is built using the same technologies you use to develop 


websites. It’s built with HTML, CSS, and JavaScript, so you may not need to 


wait for someone else to develop an extension. You probably have all the skills 


needed to create it yourself. 


Brackets isn’t your only choice. The following sections list free editors that you 


can use regardless of which platform you use and some specific to an operat- 


ing system. 


Universal 
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Brackets: http://brackets.io 

jEdit: wwwjedit.org 

Komodo Edit: http://komodoide.com/komodo-edit 

KompoZer: http://kompozer.net 

Sublime Text: www.sublimetext.com (free if you don’t mind a little nagging) 
Aptana Studio: www.aptana.com/products/studio3 

Eclipse: www.eclipse.org 

Emacs: www.gnu.org/software/emacs 

Vim: www.vim.org 


Bluefish: http://bluefish.openoffice.nl/index.html 


OS X 


° 
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Text Wrangler: www.barebones.com/products/textwrangler 


SubEthaEdit: www.codingmonkeys.de/subethaedit 
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Windows 
¢ Notepad++: http://notepad-plus-plus.org 
¢ EditPad Lite: www.editpadlite.com 


¢ HTMLKit: www.chami.com/html-kit 


Linux 
¢ Gedit: https://wiki.gnome.org/Apps/Gedit 


¢ Kate: http://kate-editor.org 


CHAPTER 4 


ANIMATIONS 





CSS transitions offer you a way to create simple animations that always start 
as the result of triggering a CSS property change. Transitions can animate only 
between a start and end state, and each state is controlled by existing CSS prop- 
erty values. For example, a transition that runs on hover transitions between 
values on the element and values on the hover state of the element. Overall, 
transitions are a simple way to animate but offer little control over the animation. 


CSS animations provide a bit more control. They allow for the creation of mul- 
tiple keyframes (FIGURE 4.1) over which the animation occurs. While they can 
start in reaction to a change in CSS property value, they can also run on their 
own. An animation executes as soon as the animation property is applied. 
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FIGURE 4.1 
Animation keyframes 





Transitions can change only between two states. 








a 





_ = 


Animations can change over many states. 











Transitions don't change property values; they define how the change occurs. 
Animations can change property values inside each keyframe. 


Transitions change implicitly. You define things at the start and end states, and 
you leave it to the browser to determine all the intermediate states. Animations 
change explicitly. The animation can define start and end states as well as some 
intermediate states. The browser still determines the intermediate states between 
keyframes, but the animation gets to define as many keyframes as it wants. 


All the things you could change when working with transitions, you can still 
change when working with animations. You determine how long the anima- 
tion lasts and what timing-function to use between keyframes. You also 
get to delay the animation if you like. 


In addition, you can decide how many times the animation should run and 
in which direction it should run. You can set the animation to be running or 
paused. You can even determine which CSS property values apply outside the 
time frame in which the animation runs. 


Animations have other benefits over transitions as you'll see in this chapter. 
In general, these benefits are about giving you more control. Transitions have 
advantages over CSS animations, too. In general, they’re about the simplicity 
of transitions. 
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Browser Support 


Browser support for CSS animations is good. It’s similar to what you saw ear- 
lier for transforms and transitions. CSS animations work in all modern brows- 
ers. In IE10 and newer, Firefox, and IE Mobile, no vendor prefixes are needed. 


Safari, Chrome, Opera, iOS Safari, Android Browser, and Blackberry Browser 
all use the -webkit vendor prefix, so you have only the one prefix to deal with. 
The animation-fill-mode property isn't supported in Android below version 
2.3. In iOS 6.1 and earlier, animations aren't supported on pseudo-elements. 


As you probably expect by this point, the holdouts are Opera Mini and IE9 
and earlier. Unfortunately, there’s no polyfill like there was for transforms 
and transitions. The fallback is to create the animation using JavaScript: You 
first check to detect CSS animation support and then use one of the available 
JavaScript libraries for working with animation. 


JavaScript animation is beyond the scope of this book, but the following sec- 
tion gives you to a few places where you can find more information. 


Detecting Browser Support 


Here are some resources for detecting support as well as some JavaScript ani- 
mation libraries: 


¢ https://hacks.mozilla.org/2011/09/detecting-and-generating-css- 
animations-in-javascript 


¢ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ 
Using _CSS_animations/Detecting_CSS_animation_support 


Finding JavaScript Libraries for Animation 


The most popular library is—without doubt—jQuery, although it’s not the most 
performant way to create animations with JavaScript. Here are some other options: 


¢ http://api.jquery.com/animate 
¢ www.polymer-project.org/platform/web-animations.html 
¢ https://github.com/web-animations/web-animations-js 


¢ http://updates.html5rocks.com/2014/05/Web-Animations--- 
element-animate-is-now-in-Chrome-36 
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You could create animations for every browser using JavaScript and ignore 
CSS animations completely. If you’re using JavaScript to create the animation 
for some browsers, why not use JavaScript for all browsers and not worry so 
much about CSS animation support? CSS animations are usually, though not 
always, more performant than the same animation in JavaScript. 


Another option, and the one I recommend, is to treat CSS animations as part 
of the noncritical experience. Use animations to enhance the design and the 
design’s aesthetic, but make sure nothing breaks in browsers that don’t support 
CSS animations. Your site should still work in any browser that doesn’t support 
animations, but it can provide a more enjoyable experience for those that can. 


Note that while CSS animations work in modern browsers, you don’t neces- 
sarily see the same smoothness. A smooth-running animation in one browser 
might look a bit jerky in another, and it’s not always the same browsers looking 
smooth or not. It depends on the browser and the specifics of the animation. 


CSS Animations 


As we've been doing throughout this book, let’s start with an example. 


CSS Positioning 
You'll make a box slide across the screen from left to right in two ways. The 
first way will be to use CSS positioning (EXAMPLE 4.1). 


1. Add a div with a class of box to your HTML. 


<div class="box"></div> 


2. Give the .box div dimensions and a background color so you can see it 
on the page. Set its position to absolute. Top and left values will be 0 
by default, which is fine for this example. 


-box { 
width: 200px; 
height: 200px; 
background-color: #393; 


position: absolute; 
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You need two components to create the animation. The first one declares 
the animation on .box. Part of the benefit of the animation property is 
the name of a keyframe where you'll change properties, so you also need 
to create this keyframe, which is the second component. 


. Add the animation property to . box. 
box { 
-webkit-animation: slide 5s linear Os 3; 
animation: slide 5s linear Os 3; 
} 
The first value in the list is slide, which is the name of your keyframe. 
. Create the slide keyframe. 


@-webkit-keyframes slide { 


from { 
left:o 


to { 
left: 600px 


@keyframes slide { 


from { 
left: 0; 


to { 
left: 600px; 
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FIGURE 4.2 
Slide animation using the 
left property 


5. Load the file in a browser. 


A green square appears in the upper-left corner of your browser. As soon 
as the page loads, it moves 600 pixels to the right, jumps back to the upper- 
left corner, slides to the right again, and repeats a third time before finally 
returning to the upper-left corner and stopping (FIGURE 4.2). 





animation: slide 5s linear Os 3; 


Instant return 


TT 





to { 
left: 600px; 





} 











The animation itself probably wasn’t very smooth, but you'll get to that in a 
moment. Let’s talk about what the code is doing, starting with the keyframe. 


The keyframe has the name slide. It includes two declarations for the left 
property, once in a from state and once in a to state. In the from state, the 
left value is 0, and in the to state, the value is 600px. The states from and 
to represent the start and end states, so initially the . box is positioned 0 pix- 
els from the left edge, and at the end of the animation cycle, it is 600 pixels 
from the left edge. 


To start the animation, you set the animation shorthand property on the . box div. 


animation: slide 5s linear Os 3; 


The animation is calling the keyframe named slide, and it runs for a dura- 
tion of 5 seconds. The timing-function is linear. There’s no delay, and the 
animation is set to run three times. 


Smoothing the Animation 


What about the jumpiness in the animation? Let’s modify the example to move 
the . box with a transform instead of changing the value of the left property 
(EXAMPLE 4.2). You need to adjust only the keyframe. 
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1. Replace the keyframe in step 4 of Example 4.1 with the following keyframe: 


@-webkit-keyframes slide { 


to { 
-webkit-transform: translate(600px, Opx); 
-ms-transform: translate(600px, Opx); 


transform: translate(600px, Opx); 


@keyframes slide { 


to { 
-webkit-transform: translate(600px, Opx); 
-ms-transform: translate(600px, Opx); 


transform: translate(600px, Opx); 


} 


In this code, the translate function moves the .box div 600 pixels to 
the right, the same as the left values did in the previous @keyframes 
rule. Notice that only the to state is included this time. You don’t need to 
include a from state. You really didn’t need it the first time either. The ini- 
tial state of the . box div as set on the . box class is exactly what you want 
for the from state, so there isn't a need to explicitly set it in the keyframe. 


2. Reload your page with this new keyframe. 


The same thing happens as before: A green .box moves 600 pixels to the 
right three times (FIGURE 4.3). However, this time the animation runs 
smoother. We'll get to why at the end of the chapter. For now just know 
there are multiple ways to create an animation (or a transition), but the 


performance of each way can vary. 
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FIGURE 4.3 
Slide animation using 
translate function 





animation: slide 5s linear Os 3; 


$$. 


Instant return 


-t0— 





from { to { 
} -webkit-transform: translate(600px, Opx); 
-ms-transform: translate(600px, Opx); 
transform: translate(600px, Opx); 











As you can see in the example, animations can reset CSS property values inside 
their keyframes. Transitions can’t do this. Although CSS animations affect 
property values while running, they don’t by default control values before the 
animation starts or after it ends. By default, the intrinsic styles (styles added 
directly to the element and not inside keyframes) of the element control the 
values outside the time the animation is running. The styles set in the keyframe 
are in control while the animation is running, but not necessarily before or 
after. You do have a measure of control to change the default. 


It’s possible to have multiple animations running at the same time and for each 
animation to set different values on the same property. When this happens, 
the animation defined last in the list of keyframe names overrides the other 
animations, and the value it sets is used. 


Animations can start in one of two ways: 
¢ On page load 
¢ In reaction to a CSS property change 


The start time of an animation is the latter of the time when the style speci- 
fying the animation changes (changing the element on hover for example) or 
the time the document's load event is fired—in other words, automatically 
after the page has loaded. 
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The @Keyframes Rule 


Keyframes are the different states of the element being animated. They're used 
to specify different values for the properties being animated at various points 
during the animation. A series of keyframes defines the behavior for one cycle 
through the animation. Remember animations can repeat multiple times. 


You define keyframes inside the @keyframes rule. 


@keyframes identifier { 


List of properties and values 
} 


An @keyframes rule begins with the @keyframes keyword followed by an 
identifier (the keyframe name). Inside the brackets is a list of CSS properties 
and values to set the style for the specific states. 


Inside each @key frames rule is a list of percent values or the keywords to and 
from. The keyword from is equivalent to 0%, and the keyword to is equivalent 
to 100%. When using a percent, the % sign needs to be included. 0 and 100 
are invalid values; 0% and 100% are the correct values. 


@Keyframes slide { 


0% { 
left: 0; 
} 
20% { 
left: 100px; 
J 
40% { 


left: 200px; 
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60% { 

left: 300px; 
} 
80% { 

left: 400px; 
} 
100% { 

left: 500px; 
} 


} 


This @keyframes rule could also be written as 


@Keyframes slide { 


from { 
left: 0; 


20% { 


left: 100px; 


40% { 


left: 200px; 


60% { 
left: 300px; 
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80% { 

left: 400px; 
i 
to { 

left: 500px; 
} 


} 


Each keyframe selector specifies the percentage of the animation’s duration 
that the specific keyframe represents. The keyframe state is specified by the 
group of properties and values declared on the selector. 


If you don't set a keyframe at 0% (or from), then the browser constructs a 0% 
state using the intrinsic values of the properties being animated. Similarly if 
no 100% (or to) keyframe is set, the browser constructs the state from intrin- 
sic values. Negative percent values or values greater than 100% are ignored. 
Keyframes containing properties that aren't animatable or contain invalid 
properties are ignored. 


@keyframes rules don't cascade. A single animation will never use keyframes 
from more than one @keyframes rule. When multiple @keyframes have been 
specified on the animation-name property, the last one in the list (ordered by 
time) with a matching @key frames rule controls the animation. 


It's valid for an @keyframes rule to be empty, and because of this it can be 
used to hide keyframes previously defined. The empty @keyframes rule should 
come later in your CSS to override any @key frames rule with the same iden- 
tifier that appears earlier in your CSS. 


1. Add the following after the @keyframes rules you set in Example 4.1. 


@-webkit-keyframes slide { 
} 


@keyframes slide { 
} 


NOTE 


I'm using the words 
“keyframe” and 
“keyframes” in ways that 

might be confusing. 

Each percentage value 

represents a new 

keyframe or state with 
its own CSS property 
values. Together the 
properties and values in 
each keyframe make up 

a keyframe declaration 

block. The @keyframes 

rule is the special 

@ rule that contains all 

the different keyframes 

(states) that an animation 

runs through. 
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2. Reload your webpage. The animation should no longer run, since an empty 
@keyframes rule is called. 


3. Remove the empty @keyframes rule or place it before the nonempty 
@keyframes rule, and the animation will run again. 


animation-* Properties 


CSS animations offer eight different properties for controlling an animation. 
Some are comparable to similarly named transition-* properties, and some 
will be new. 


animation-name Property 


The animation-name property defines a comma-separated list of animations 
to apply to the given selector. It’s similar to the transition-property in that 
it ultimately defines the properties that are animated. With the transition- 
property, those properties are explicitly named. With the animation-name, 
an @keyframes rule is explicitly named, and that rule contains the properties 
that will be animated. 


-webkit-animation-name: slide, drop; 


animation-name: slide, drop; 


Each animation-name in the list should match a specific @key frames rule. 


@-webkit-keyframes slide { 


properties: values; 


@keyframes slide { 


properties: values; 
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@-webkit-keyframes drop { 


properties: values; 


@keyframes drop { 


properties: values; 


} 


If there’s no match in keyframe name (identifier), the animation won't run. In 
addition to the identifier of an @key frames rule, a value of none is also valid. 
When the none keyword value is used, no animation runs. You can use none 
to override an animation that’s inherited from a parent element. 


-webkit-animation-name: none; 


animation-name: none; 


@keyframes change the value of CSS properties. If multiple animations try 
to change the value of the same property on an element, the animation clos- 
est to the last name in the animation-name list controls the property values. 


If multiple animation-names are listed and one is removed, it stops running, 
but the other listed animations continue. 


Every listed animation-name should have a corresponding value for any oth- 
er animation-* properties. If there are too many values in an animation-* 
property, any leftover values are ignored. If there aren't enough values, the list 
of values will be repeated until there are enough to match. 


Animations are applied to elements with an animation-name value that match- 
es the name of an @key frames rule. Once applied, the animation runs. It runs 
once the page loads unless it’s been applied to a trigger, such as : hover. Once 
started, an animation continues to run until it finishes or the animation-name 
value is removed, such as removing the : hover on the animating element. 


An animation ends based on some combination of the animation-duration, 
animation-iteration-count, and animation-fill mode properties. You 
can also end an animation by setting the animated element's display prop- 
erty to none. This also ends any animations running on descendant elements. 
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NOTE 


When an animation- 
name is added to the 
:hover state of an 
element, removing the 
hover also removes the 
animation-name, and 
the animation stops. 


Changing the value of an animation element’s display property to something 
other than none immediately starts that animation. It also starts any animations 
applied to descendants of the parent element. Changing the value of display 
is one more way you can turn on and off an animation. 


The values in each keyframe in an @keyframes rule are held as a snapshot 
when the animation starts. Changing the intrinsic property on an element 
with an animation running has no effect. The values in the animation are in 
control until the animation stops. 


animation-duration Property 


The animation-duration property defines how long an animation lasts 
during one cycle of the animation. It’s similar to the transition-duration 
property and takes a time value in seconds (s) or milliseconds (ms). 


-webkit-animation-duration: 10s; 


animation-duration: 10s; 


Like transition-duration, the default value is 0s, which is why elements 
don’t animate automatically even when they're animatable. Technically, they 
are animating, but everything happens in an instant. 


Note that animation- duration is the length of one full cycle of the animation. 
It’s not the length of each keyframe in the @key frames rule. For example, if you 
set an animation-duration of 10s and have the following @key frames rule 


@Keyframes duration { 


0% { 


property: value; 


50% { 


property: value; 
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100% { 


property: value; 


} 


the animation will take 10 seconds to get from 0 percent to 100 percent, and 
not 10 seconds to go from 0 percent to 50 percent and then 10 seconds more 
from 50 percent to 100 percent. 


Similarly, when an animation is set to loop multiple times, the animation- 
duration is the time it takes to complete one loop or cycle. 


animation-timing-function Property 


The animation-timing - function property describes an acceleration curve 
for each keyframe in a single animation cycle. It’s similar to the transition- 
timing-function. You can use any of the keyword timing functions or cre- 
ate one of your own. 

animation-timing-function: step-start; 
animation-timing-function: step-end; 
animation-timing-function: steps(); 
animation-timing-function: ease; 
animation-timing-function: linear; 
animation-timing-function: ease-in; 
animation-timing-function: ease-out; 
animation-timing-function: ease-in-out; 
animation-timing-function: cubic-bezier(); 

Note that the animation-timing- function applies between keyframes and 
not over the entire animation cycle. This means if you have keyframes at 0%, 
50%, and 100% and an animation-timing-function of ease-in, the ani- 


mation eases into each of the three keyframes in the @keyframes rule and 
not just once at the beginning of the animation. 
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Let's try an example to see this more clearly (EXAMPLE 4.3). 


1. Add a div with a class of box to your HTML. 


<div class="box"></div> 


2. Give the .box class dimensions and a background-color. 
-box { 
width: 200px; 
height: 200px; 
background-color: #393; 
i 


3. Add an animation to the .box div using the individual animation-* 
properties. 


-box { 
-webkit-animation-name: slide; 


animation-name: slide; 


-webkit-animation-duration: 5s; 


animation-duration: 5s; 


-webkit-animation-timing-function: ease-in; 
animation-timing-function: ease-in; 
} 
4. Finally add an @keyframes rule to your CSS. 


@-webkit-keyframes slide { 


0% { 
-webkit-transform: translate(Opx, Opx); 
-ms-transform: translate(Opx, Opx); 


transform: translate(Opx, Opx); 


ry wet 


transform: 
} 
50% { 
-webkit-transform: 
-ms-transform: 
transform: 
} 
75% { 
-webkit-transform: 
-ms-transform: 
transform: 
} 
100% { 
-webkit-transform: 
-ms-transform: 
transform: 
: 


-webkit-transform: 


-ms-transform: 


@keyframes slide { 


0% { 


translate(150px, 
translate(150px, 


translate(150px, 


translate(300px, 
translate(300px, 


translate(300px, 


translate(450px, 
translate(450px, 


translate(450px, 


translate(600px, 
translate(600px, 


translate(600px, 


Opx) ; 
Opx) ; 


Opx) ; 


Opx) ; 
Opx) ; 


Opx) ; 


Opx) ; 
Opx) ; 


Opx) ; 


Opx) ; 
Opx) ; 


Opx) ; 


-webkit-transform: translate(Opx, Opx); 


-ms-transform: translate(Opx, Opx); 
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transform: translate(Opx, Opx); 


} 
25% { 
-webkit-transform: translate(150px, Opx); 
-ms-transform: translate(150px, Opx); 
transform: translate(150px, Opx); 
} 
50% { 
-webkit-transform: translate(300px, Opx); 
-ms-transform: translate(300px, Opx); 
transform: translate(300px, Opx); 
J 
75% { 
-webkit-transform: translate(450px, Opx); 
-ms-transform: translate(450px, Opx); 
transform: translate(450px, Opx); 
J 
100% { 
-webkit-transform: translate(600px, Opx); 
-ms-transform: translate(600px, Opx); 
transform: translate(600px, Opx); 
J 


} 


This code adds five keyframes to the @keyframes rule. This should make 
it easier to see that the ease-in timing function is running between each 
keyframe and not once over the entire animation cycle. 
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5. Load your page in a browser, and observe the timing curve between key- 
frames (FIGURE 4.4). 





FIGURE 4.4 


a x es a 7 - _ 
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Setting the ease-in timing function universally on all keyframes 














































































































































































































You can override the timing function inside each of the keyframes. When a 
timing function is applied inside a keyframe, it’s instructing the animation 
to use that function moving from the keyframe with the timing function 
applied to the next one (EXAMPLE 4.4). 


6. Replace your @keyframes slide rule from Example 4.3 with the follow- 
ing rule. Changes in the code are highlighted. 


@-webkit-keyframes slide { 


0% { 
-webkit-transform: translate(Opx, Opx); 
-ms-transform: translate(Opx, Opx); 


transform: translate(Opx, Opx); 


25% { 
-webkit-transform: translate(150px, Opx); 
-ms-transform: translate(150px, Opx); 


transform: translate(150px, Opx); 
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-webkit-animation-timing-function: linear; 


animation-timing-function: linear; 


} 
50% { 
-webkit-transform: translate(300px, Opx); 
-ms-transform: translate(300px, Opx); 
transform: translate(300px, Opx); 
J 
75% { 
-webkit-transform: translate(450px, Opx); 
-ms-transform: translate(450px, Opx); 
transform: translate(450px, Opx); 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
} 
100% { 
-webkit-transform: translate(100px, Opx); 
-ms-transform: translate(100px, Opx); 
transform: translate(100px, Opx); 
J 
; 


@keyframes slide { 


0% { 
-webkit-transform: translate(Opx, Opx); 
-ms-transform: translate(Opx, Opx); 


transform: translate(Opx, Opx); 


aoe 4 


-webkit-transform: translate(150px, 


Opx) ; 


-ms-transform: translate(150px, Opx); 


transform: translate(150px, Opx); 


-webkit -animation-timing- function: 


animation-timing-function: 


: 
50% { 
-webkit-transform: translate(300px, 
-ms-transform: translate(300px, 
transform: translate(300px, 
} 
75% { 
-webkit-transform: translate(450px, 
-ms-transform: translate(450px, 
transform: translate(450px, 
-webkit -animation-timing- function: 
animation-timing-function: 
} 
100% { 
-webkit-transform: translate(100px, 
-ms-transform: translate(100px, 
transform: translate(100px, 
} 


} 


In this code, you override the ease-in timing function on two 


keyframes. 


linear; 


linear; 


Opx) ; 
Opx) ; 


Opx) ; 


Opx) ; 
Opx) ; 


Opx) ; 


linear; 


linear; 


Opx) ; 
Opx) ; 


Opx) ; 
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of the 
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FIGURE 4.5 
Animation timing functions 
on keyframes 


7. Reload your page, and observe the difference in the acceleration curve 
between keyframes (FIGURE 4.5). 
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Ease-in Linear Ease-in Linear Ease-in 


Each keyframe can be assigned its own timing function. 











The way timing functions work over keyframes and the ability to override them 
on a specific keyframe is powerful and perhaps a bit scary. You have great con- 
trol over how your animation accelerates, but you also have the responsibility 
to exercise that control. Having an animation ease in between every keyframe 
is probably not what you want. 


animation-iteration-count Property 


Transitions run once when triggered and run once in reverse when the trigger 
is removed. Animations can run as many times as you want. The animation- 
iteration-count property defines how many times an animation runs, and 
it takes as a value any number or the keyword infinite. The latter sets your 
animation to run in an endless loop. 


-webkit-animation-iteration-count: 3; 


animation-iteration-count: 3; 


-webkit-animation-iteration-count: infinite; 


animation-iteration-count: infinite; 
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You've already seen the animation-iteration-count in action in Exam- 


ple 4.1, although that example used the animation shorthand to set all the val- 


ues. Because you might be getting tired of sliding boxes and because the rest 


of the examples in this chapter are variations of that same sliding box, let’s do 
something different here (EXAMPLE 4.5). 


1. 


Start by adding a div with a class of box to your HTML. 


<div class="box"></div> 


Instead of giving dimensions and a background-color to the . box div, 
set the dimensions to Opx, and add a border with different colors for each 
side. Finally, give the border a radius of 50%. 


box { 
width: Opx; 
height: Opx; 
border-width: 100px; 
border-style: solid;; 
border-color: #393 #933 #399 #993; 
border-radius: 50%; 


} 


. Load your page. 


A circle appears with four pie wedges, each a different color. 


Add the following animation-* properties to .box. Note that you'll be 
rotating the . box div this time instead of moving it. 


box { 
-webkit-animation-name: rotate; 


animation-name: rotate; 


-webkit-animation-duration: 4s; 


animation-duration: 4s; 


-webkit-animation-timing-function: linear; 


animation-timing-function: linear; 
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-webkit-animation-iteration-count: 3; 
animation-iteration-count: 3; 
} 
5. Create the rotate @keyframes rules to rotate the . box div. 


@-webkit-keyframes rotate { 


0% { 
-webkit-transform: rotate(Odeg) ; 
-ms-transform: rotate(Odeg) ; 


transform: rotate(Odeg) ; 


} 
25% { 
-webkit-transform: rotate(90deg) ; 
-ms-transform: rotate(90deg) ; 
transform: rotate(90deg) ; 
: 
50% { 
-webkit-transform: rotate(180deg) ; 
-ms-transform: rotate(180deg) ; 
transform: rotate(180deg) ; 
: 
75% { 


-webkit-transform: rotate(270deg) ; 
-ms-transform: rotate(270deg) ; 


transform: rotate(270deg) ; 


100% { 
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-webkit-transform: rotate(360deg) ; 


-ms-transform: rotate(360deg) ; 


@keyframes rotate 


0% { 
-webkit- 
-ms- 
I 
25% { 
-webkit- 
-ms- 
} 
50% { 
-webkit- 
-ms- 


transform: rotate(360deg) ; 


{ 


transform: rotate(Odeg) ; 
transform: rotate(Odeg) ; 


transform: rotate(Odeg) ; 


transform: rotate(90deg) ; 
transform: rotate(90deg) ; 


transform: rotate(90deg) ; 


transform: rotate(180deg) ; 
transform: rotate(180deg) ; 


transform: rotate(180deg) ; 
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75% { 
-webkit-transform: rotate(270deg) ; 
-ms-transform: rotate(270deg) ; 
transform: rotate(270deg) ; 
} 
100% { 
-webkit-transform: rotate(360deg) ; 
-ms-transform: rotate(360deg) ; 
transform: rotate(360deg) ; 
} 


} 


6. Load your code in a browser. 
The circular . box div rotates around its center. 


If you followed the colors in the example for the borders, the green wedge 
should start at the top. Each time the green wedge is back at the top is one 
FIGURE 4.6 iteration or one animation cycle (FIGURE 4.6). 


Animation iteration count 





One iteration of an animation 


0% { 50% { 100% { 
transform: rotate(Odeg) ; transform: rotate(180deg) ; transform: rotate(360deg) ; 





25% { 75% { 
transform: rotate(90deg) ; transform: rotate(270deg) ; 
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animation-direction Property 


Another new property is the animation-direction property, which defines 
whether an animation runs forward or in reverse on some or all of its cycles. 
The animation-direction property takes one of four values: 


¢ normal specifies that all iterations of the animation are played as specified. 


¢ reverse specifies that all iterations of the animation are played in the 
reverse direction as specified. 


¢ alternate causes the cycles to alternate between normal and reverse 
with normal for the first cycle and all odd iteration counts. Even counts 
are reversed. 


¢ alternate-reverse causes the cycles to alternate between normal and 
reverse with reverse for the first cycle and all odd iteration counts. Even 


counts are normal. 
-webkit-animation-direction: normal; 


animation-direction: normal; 


-webkit-animation-direction: alternate-reverse; 


animation-direction: alternate-reverse; 


When the animation plays in reverse, the timing functions also run in reverse— 
for example, ease-in runs as ease-out. 


Until now, the sliding box you've been working with slides to the right and 
then instantly returns to its initial location. The jump is more than a little jar- 
ring. The alternate and alternate-reverse values can remove the jump. 
Instead, the box continues to slide right and left until the animation stops. 


Let’s go back to the sliding . box div you've used through most of this chap- 
ter (EXAMPLE 4.6). 


1. Start by adding a div with a class of box to your HTML. 


<div class="box"></div> 
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2. Give the .box div dimensions and a background color. 
«box { 
width: 200px; 
height: 200px; 


background-color: #393; 


} 
3. Add the animation-* properties to .box. Additions to the code are 
highlighted. 
-box { 
-webkit-animation-name: slide; 
animation-name: slide; 
-webkit-animation-duration: 5s; 
animation-duration: 5s; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
-webkit-animation-iteration-count: 3; 
animation-iteration-count: 3; 
-webkit-animation-direction: reverse; 
animation-direction: reverse; 
} 


Notice the reverse direction. 
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4. Create the slide keyframe. 


@-webkit-keyframes slide { 


to { 
-webkit-transform: translate(600px, Opx); 
-ms-transform: translate(600px, Opx); 
transform: translate(600px, Opx); 
} 


@keyframes slide { 


to { 
-webkit-transform: translate(600px, Opx); 
-ms-transform: translate(600px, Opx); 
transform: translate(600px, Opx); 
} 


i 
5. Load your page. 


First it jumps 600 pixels to the right (so fast that you might not see the . box 
on the left before the jump), and then it slides back to its initial location 
and repeats the sequence three times. 


6. Change the value for the animation-direction in step 3 to alternate 
(EXAMPLE 4.7). 


-webkit-animation-direction: alternate; 


animation-direction: alternate; 
7. Reload your page, and observe the difference (FIGURE 4.7). 


Now the .box div slides back and forth between the initial and ending 
states. This makes for a much smoother overall animation. Experiment with 
the normal and alternate-reverse values. 
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FIGURE 4.7 
Animation direction 





Iteration 1 runs normally. 


er os 


Iteration 2 alternates and runs in the reverse direction. 


<< 


Iteration 3 alternates again to run in the normal direction. 


—— 





When the animation completes 
the .box div jumps instantly 
to its initial location. 














animation-play-state Property 


By default, your animations run as soon as the animation-name property is 
assigned. You can change that behavior with the animation-play-state 
property, which defines whether an animation is running or paused. 


-webkit-animation-play-state: running; 


animation-play-state: running; 


-webkit-animation-play-state: paused; 


animation-play-state: paused; 


The default value, as you would likely guess, is running. If you change the 
value to paused, the animation stops where it is until the animation-play- 
state is changed again to running. When paused, the animation displays 
whatever state the animation was in at that moment. When the animation is 
resumed, it restarts from the state it was paused in. 
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Let’s make one addition to Example 4.7 (EXAMPLE 4.8). 


1. Add the animation-play-state property to the . box div from the pre- 
vious example. Additions to the code are highlighted. 


box { 
-webkit-animation-name: slide; 


animation-name: slide; 


-webkit-animation-duration: 5s; 


animation-duration: 5s; 


-webkit-animation-timing-function: linear; 


animation-timing-function: linear; 


-webkit-animation-iteration-count: 3; 


animation-iteration-count: 3; 


-webkit-animation-direction: alternate; 


animation-direction: alternate; 


-webkit-animation-play-state: paused; 
animation-play-state: paused; 
I 
2. Reload your page. 


Unlike previous examples, this time the animation doesn’t run when the page 
is finished loading. To run the animation, you need to change animation- 
play-state to running and reload the page. 


This isn’t particularly useful if you have to reload the page after changing 
the animation-play-state property, but it becomes much more useful 
when changing properties via JavaScript or some other trigger. 


Let’s modify the example to add triggers. 
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3. Modify your HTML to include play and pause buttons. 
<div class="container"> 
<div class="box" id="box"></div> 
<button id="play">Play</button> 
<button id="pause">Pause</button> 


</div> 


The buttons get ids so your JavaScript code has something to hook into. 
Notice that the code adds an id of box to the .box div. 


The buttons need some styling. 
4. Add the following to your CSS: 

button { 
padding: O.5em 1em; 
border: 1px solid #999; 
border-radius: 5%; 
margin-top: 3em; 

} 


Nothing special. Just a little style to make your buttons look “buttony.” Now 
let’s add some JavaScript so the buttons do something. 


5. Add the following code in the head of your document between <script> 
</script> tags. 


<script> 


var init = function() { 


var box = document.getElementById('box'); 
var play = document.getElementById('play'); 


var pause = document.getElementById('pause'); 
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document. getElementById('play').addEventListener( 
‘click’, function(){ 


box.style.webkitAnimationPlayState = "running"; 
box.style.animationPlayState = "running"; 
}, false); 


document. getElementById('pause' ).addEventListener( 
‘click’, function(){ 


box.style.webkitAnimationPlayState = "paused"; 
box.style.animationPlayState = "paused"; 


}, false); 


}3 


window. addEventListener('DOMContentLoaded', init, false); 


</script> 


Hopefully, the script looks somewhat familiar. The last line of code listens 
for the page to load and then calls the init function. 


Inside the function, you first get hooks to each button and the . box div and 
set them to appropriately named variables. Next you add event listeners to each 
button, and if a button is clicked, you set the value of animationPlayState 
to either running or paused, depending on which button was clicked. 


6. Reload your page one more time. 


You should see the new play and pause buttons. The green box sits in the 
top-left corner until you click the Play button to start the animation. Once 
the box begins moving, you can click the Pause button to stop the anima- 
tion. Clicking Play starts the animation again from the point at which it 
was stopped. 


animation-delay Property 


The animation-delay property defines when an animation starts. It works 
the same way the transition-delay property works. Like transition- 
delay, values are in units of time and can be positive, 0, or negative. 


125 


126 CSS ANIMATIONS AND TRANSITIONS FOR THE MODERN WEB 


-webkit-animation-delay: 


animation-delay: 


-webkit-animation-delay: 


animation-delay: 


-webkit-animation-delay: 


animation-delay: 


A positive value delays the animation until some point in the future. A value 
of 0 (the default) starts the animation instantly. A negative value appears to 
start the animation in the past. It starts instantly, but at a point in the middle 


2s; 


2s; 


Os; 


Os; 


-2s; 


-2s; 


of the animation. The delay works as an offset. 


Let’s continue to build on Example 4.8. 


1. Add an animation-delay to the .box div. Additions to the code are 


highlighted (EXAMPLE 4.9). 
-box { 


-webkit-animation- 


animation- 


-webkit-animation- 


animation- 


-webkit-animation- 


animation- 


-webkit-animation- 


animation- 


name: slide; 


name: slide; 


duration: 5s; 


duration: 5s; 


timing-function: 


timing-function: 


iteration-count: 


iteration-count: 


linear; 


linear; 


33 
33 


-webkit-animation-direction: alternate; 


animation-direction: alternate; 


-webkit-animation-play-state: 


animation-play-state: 


-webkit-animation-delay: 2s; 


} 


animation-delay: 2s; 


2. Reload your page. 


The animation does nothing for 2 seconds and then slides back and forth like 
before (FIGURE 4.8). Try using some negative values, and observe the difference. 
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FIGURE 4.8 
Animation delay 
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animation-fill-mode Property 


You probably had an idea what each animation-* property did before I told 
you. Some were familiar after working through transitions, and the property 
names give a pretty good clue about what the others do. 


The animation-fill-mode property is probably not intuitive to you. You 
might be thinking about background colors filling your element or something 
like that. The animation-fill-mode property actually defines what values 
are applied by an animation outside of its execution time. 


By default, an animation affects property values only while it’s running. This 
is why the example animations you've been working with often jump back to 
the initial state when the animation stops. Whatever values are set in each key- 
frame are the ones used for a property until either the next keyframe changes 
it or the animation stops playing. When the animation stops, the CSS property 
values are whatever values were set intrinsically on the element. 


The animation-fill-mode property overrides this behavior. It takes four 
keyword values. 


animation-fill-mode: none | forwards | backwards | both 


¢ none is the default, and it doesn’t apply any property values in the anima- 
tion outside the animation’s execution. 


¢ backwards applies the property values defined in the first keyframe that 
starts the first iteration to the period defined by animation-delay. The 
values come from either the 0% (from) or 100% (to) keyframes, depend- 
ing on the value of the animation-direction property. 


¢ forwards applies the property values after the animation stops. If the 
animation-iteration-count value is greater than 0, the values applied 
are those at the end of the last completed iteration. If the count value equals 
0, the values applied are those that start the first iteration. 


¢ both does what you might expect and applies both the forwards and 
backwards values to the animation-fill-mode property. 
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Once again let’s expand the example we've been working with. 


1. Add an animation-fill-mode to the .box div. Additions to the code are 
highlighted. Note that the iteration-count changes to 1 (EXAMPLE 4.10). 


box { 
-webkit-animation-name: slide; 


animation-name: slide; 


-webkit-animation-duration: 5s; 


animation-duration: 5s; 


-webkit-animation-timing-function: linear; 


animation-timing-function: linear; 


-webkit-animation-iteration-count: 1; 


animation-iteration-count: 1; 


-webkit-animation-direction: alternate; 


animation-direction: alternate; 


-webkit-animation-play-state: running; 


animation-play-state: running; 


-webkit-animation-delay: 2s; 


animation-delay: 2s; 


-webkit-animation-fill-mode: forwards; 


animation-fill-mode: forwards; 
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FIGURE 4.9 
Animation fill mode 


2. Load the page in a browser. 


As before, the green box slides to the right when the animation begins. 
However, now when it stops it doesn’t jump back to its initial state. Setting 
the animation-fill-mode to forwards allows the . box div to hold the 
final state in the animation after the animation completes (FIGURE 4.9). 
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Slide animation 
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-webkit-animation-fill-mode: forwards; 
animation-fill-mode: forwards; 





After animation completes 





The .box div holds 
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values of the slide 
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Experiment with the different animation-fil1-mode values to observe what 
each does. Change some of the other animation-* property values in combi- 
nation with the animation-fill-mode property as well. 


For example, use either of the reverse values on the animation-direction 
and then use forwards on the animation-fill-mode. 


animation-direction: alternate-reverse; 
animation-fill-mode: backwards; 


Or add a 0% (or from) keyframe in the @keyframes rule so the . box begins 
the animation in a different location. 


0% { 
-webkit-transform: translate(75px, Opx); 
-ms-transform: translate(75px, Opx); 


transform: translate(75px, Opx); 


CHAPTER 4. ANIMATIONS 131 


Make sure there's a positive animation-delay, and set animation-fill- 
mode to backwards. 


animation-fill-mode: backwards; 


For both changes, observe where the . box div is located before and after the 
animation as well as during the animation-delay. 


animation Shorthand Property 


You can also use the animation shorthand property to set everything at once. 
You saw this in the first example in this chapter. 


animation: animation-property animation-duration 
animation-timing-function animation-delay 
animation-iteration-count animation-direction 
animation-fill-mode animation-play-state; 


If you replace each of the properties with a value, you get something like this: 


animation: slide 2s ease 0.5s 2 reverse both running; 


To add multiple animations, you separate each definition with a comma like this: 


animation: slide 2s ease 0.5s 2 reverse both running, 
bounce 5s ease-in-out O 3 alternate forwards paused; 


Note that the comma occurs between the full definition for each animation. 
There are two definitions in this line of code, so a single comma between them 
is all you need. 


As with transitions, order is important. Just as with the transition shorthand, 
the first time value is assigned to the animation- duration property, and the 
second time value is assigned to the animation-delay property. 


Animation Events 


You learned in the last chapter that when a transition completes, it generates 
a DOM event. Animations also fire events. They fire an event at the start and 
end of an animation as well as the end of each iteration. 


NOTE 


The current animation 
spec mentions a possible 
future addition. At 
some point, a / notation 
might be added to 

the shorthand. If that 
happens, you'll be able 
to specify duration and 
delay as 10s/2s, where 
the numerator (10s) is 
the duration and the 
denominator (2s) is the 
delay. This doesn’t work 
now, but is a future 
possibility. 
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Types of Animation Events 


Transitions fire an event only when the transition ends. Animations can fire 


any of three possible events: 


¢ 


An animationstart event fires when the animation starts. If a positive 
animation-delay has been set, the event fires when the delay ends. If the 
delay is negative, the event fires immediately with an elapsedTime equal 
to the absolute value of the delay. 


An animationend event fires when the animation completes. This event 
is similar to the transitionend event. 


An animationiteration event fires at the end of each iteration of an 
animation, except the last one when an animationend event fires instead. 
This means animations with zero or one iteration wont fire an animation- 


iteration event. 


For transitions the transitionend event offers three read-only values. Simi- 


larly there are three read-only values you can access with animation events: 


¢ 


animationName is the value of the animation-name property of the ani- 
mation that fired the event. 


elapsedTime is the amount of time the animation has been running, in 
seconds, when this transitionend event fires. This time excludes any time 
the animation was paused. The elapsedTime for an animationstart 
event is 0.0s. 


pseudoElement is the name (beginning with two colons) of the CSS pseudo- 
element on which the animation runs or an empty string if the animation 
runs directly on an element. At the moment only Firefox version 23 and 
newer supports reading this value, but in practice I’ve yet to get it working. 


Animations can have multiple properties animating at the same time. These 


can be properties set on a single animation or on multiple animations. An 


event is generated for each animation-name value and not for each individ- 


ual property being animated. 


As long as an animation has a valid @keyframes rule and a nonzero duration, 


it generates events, even if the @key frames rule is empty. 
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Let’s try an example so we can experiment with these events and their associ- 
ated values. You've been working with variations of the same example. Why 
stop now? You've made the box slide to the right and most of the time back to 
the left. Let’s add another @keyframes rule that generates a downward slide. 
You'll apply this new rule after the . box finishes the slide animation. 


The animation will slide to the right, slide back to its initial position, and then 
slide down and back up again (EXAMPLE 4.11). 


1. Add div with a class of box and an id of box to your HTML. 


The class is used to style the div like you've been doing all along, and the 
id is used to hook into the element via JavaScript. The class name and 
id name don’ need to be the same. You just need to make sure to match 
the names you give them in the appropriate place in the code. 


<div class="box" id="box"></div> 
2. Give the .box div dimensions and a background color so you can see it 
on the page, and then add an animation using the animation shorthand. 
-box { 
width: 200px; 
height: 200px; 


background-color: #393; 


-webkit-animation: slide 2s linear Os 2 alternate 
both; 


animation: slide 2s linear Os 2 alternate 
both; 


J 


Before creating the @keyframes rule, take a look at the shorthand in this 
code, and make sense of what it’s doing. It’s calling an @keyframes rule 
named slide. Each animation cycle runs a total of 2 seconds. The timing 
is linear so there is no acceleration. There’s no delay, and the animation 
completes two cycles. It runs once normally and then runs in reverse. Ani- 
mation elements hold their state both before and after the animation runs. 
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3. Create the @keyframes rule using translation to move the element 600 
pixels to the right. 


@-webkit-keyframes slide { 


100% { 
-webkit-transform: translate(600px, Opx); 
-ms-transform: translate(600px, Opx); 


transform: translate(600px, Opx); 


@keyframes slide { 


100% { 
-webkit-transform: translate(600px, Opx); 
-ms-transform: translate(600px, Opx); 


transform: translate(600px, Opx); 


} 


4. Load the page in a browser. 


The familiar green . box slides to the right and then slides back left to its 
starting point. This animation fires events. You'll capture those events using 
a little JavaScript. Don’t worry, it’s no more complicated than what you did 
in the last chapter with transition events, and youre free to copy the code. 


What you're going to do is listen for one of the animation events and when 
it occurs, start a second animation. The .box is probably getting tired of 
sliding across the page so a sLidedown @keyframes rule seems in order. 
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5. Create an @keyframes rule for a new slidedown animation. Add a trans- 
lation transform, and make the .box move 300 pixels down the screen. 


@-webkit-keyframes slidedown { 


to-{ 
-webkit-transform: translate(Opx, 300px); 
-ms-transform: translate(Opx, 300px); 
transform: translate(Opx, 300px); 
} 


@keyframes slidedown { 


to { 
-webkit-transform: translate(Opx, 300px); 
-ms-transform: translate(Opx, 300px); 


transform: translate(Opx, 300px); 


} 


You can reload your page if youd like, but Pll save the suspense. Nothing 
changes. You've created a @keyframe rule, but it’s not attached to any ele- 
ment yet. That’s where the events and JavaScript come in. 


6. Add the following JavaScript between <script></script> tags in the 
head of your document: 


<script> 
var init = function() { 


var box = document.getElementById("box") ; 
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box.addEventListener("webkitAnimationStart", 
updateAnimation , false); 


box.addEventListener("oTAnimationStart", 
updateAnimation , false); 


box.addEventListener("animationstart", 
updateAnimation , false); 


function updateAnimation (e) { 
box.style.webkitAnimationName = "slidedown"; 


box.style.animationName = "slidedown"; 


}3 


window. addEventListener('DOMContentLoaded', init, false); 


</script> 


The JavaScript is a modified version of what you saw with transition events. 
The last line of code, window. addEventListener('DOMContentLoaded', 
init, false) ;, once again runs an init function after the page con- 
tent loads. 


In the init function, you first get the element with an id of box and assign 
it to a variable named box. Next, you add an event listener (with and without 
vendor prefixes) to the box to capture an animationstart event. When 
the event is captured, it’s passed to an updateAnimation function. Finally 
the updateAnimation function changes the animation-name value to 
the slidedown animation created in step 5. 


7. Reload your page, and observe what happens. 


The second animation (slidedown) runs, but the first one (slide) doesn't. 
This happens because the JavaScript captures the event that fires at the start 
of the animation and changes which animation is used before slide can run. 


Let’s capture a different event (EXAMPLE 4.12). 
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8. Change your JavaScript to listen for animationiteration, and change its 
vendor-prefixed variations. Changes in the code are highlighted. 


<script> 
var init = function() { 


var box = document.getElementById("box"); 


box. addEventListener("webkitAnimationIteration”, 
updateAnimation , false); 


box.addEventListener("oTAnimationIteration", 
updateAnimation , false); 


box. addEventListener("animationiteration", 
updateAnimation , false); 


function updateAnimation (e) { 
box.style.webkitAnimationName = "slidedown"; 


box.style.animationName = "slidedown"; 


}3 


window. addEventListener('DOMContentLoaded', init, false); 


</script> 
9. Reload your page. 


The slide animation starts and completes a single cycle before it jumps 
back to its initial state and begins and completes both iterations of the 
slidedown animation. 


This time you listened for the event that fires at the end of each iteration 
of an animation. The slide animation completes one iteration, the 
animationiteration event is fired, and your code starts the slidedown 
animation. The slidedown animation completes because the JavaScript 
code runs only a single time. No code is listening for the events that the 
slidedown animation fires in this example. 
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10.Change your JavaScript code to listen for animationend, and change 
its vendor-prefixed variations (EXAMPLE 4.13). Changes in the code are 
highlighted. 


<script> 
var init = function() { 


var box = document.getElementById("box") ; 


box. addEventListener("webkitAnimationEnd", 
updateAnimation , false); 


box. addEventListener("oTAnimationEnd", 
updateAnimation , false); 


box.addEventListener("animationend", 
updateAnimation , false); 


function updateAnimation (e) { 
box.style.webkitAnimationName = "slidedown"; 


box.style.animationName = "slidedown"; 


3 


window. addEventListener('DOMContentLoaded', init, false); 


</script> 
11. Reload the page. 


This time both animations start and complete. First slide moves the . box 
to the right before returning. As soon as it completes, an animationend 
event is fired. Your JavaScript hears the event and starts the slidedown 
animation, which also completes. 


FIGURE 4.10 summarizes listening for each of the three animation events 
and starting the slidedown animation after the slide events fire. 
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FIGURE 4.10 


animationstart animationiteration : _ 
Animation events summary 


event fires. event fires. 
Iteration 1 
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slide animation 


Iteration 2 
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The slidedown animation can be set to run 
after an animation event fires. 


When listening for animationstart, the slide 
slidedown animation animation is replaced by the slidedown before 
it has a chance to run. 


When listening for animationiteration, the first 
iteration of the slide animation runs, before 
slide is replaced by slidedown. The second 
iteration of slide doesn't have a chance to run. 


When listening for animationend, the slide 
animation completes both of its iterations 
before slide is replaced with slidedown. Both 
animations run in their enitrety. 








Let’s do one more thing: read the read-only values. You can access and read 
them at each of the three fired events. 


12. Change your JavaScript code to listen for the animationstart event, 
and set an alert to display the animationName that fired the event and 
the elapsedTime it’s been running. Changes in the code are highlighted. 


<script> 
var init = function() { 


var box = document.getElementById("box") ; 


box. addEventListener("webkitAnimationStart", 
updateAnimation , false); 


box. addEventListener("oAnimationStart", 
updateAnimation , false); 


box. addEventListener("animationstart", 
updateAnimation , false); 
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function updateAnimation (e) { 


alert("The " + e.animationName + " animation has 
> been running for " + e.elapsedTime + "s"); 


}3 


window. addEventListener('DOMContentLoaded', init, false); 
</script> 
13. Reload your page. 


As soon as the page loads, the slide animation runs, and an alert pops up 
with the message, “The slide animation has been running for 0s.” 


FIGURE 4.11 shows the alerts that display when listening for the animation- 


iteration event. 





FIGURE 4.11 
Animation event read-only 
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Experiment by changing which event is listened for. Change animationstart 
to animationiteration, then to animationend (and their vendor-prefixed 
variants), and observe the differences. When listening for the animationiteration 
event, your alert should read “The slide animation has been running for 2s,’ and 
when listening for the animationend event it should read “The slide animation 
has been running for 4s.” 
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Transition or Animation 


One of the questions you might be asking yourself is when you should use a 
transition and when you should use an animation. You can create most of the 
examples in this and the previous chapter using either transitions or anima- 
tions. So which should you choose when you want to animate something? 


Similarities 

You can start to answer that question by thinking about the similarities and dif- 
ferences of transitions and animations. One thing they both have in common 
is their properties. About half the animation-* properties have a counterpart 


transition-* property. The timing functions, for example, are the same, except 
for using the word animation or transition to start the property name. 


Both can listen for changes to CSS property values and interact with JavaScript 
events. Triggering events like those in the following list can make changes in 
CSS property values that start either animations or transitions: 


¢ :hover 

@ :link 

* :active 

* :visited 
* :focus 

* :checked 
* :disabled 


You can also start transitions and animations through changes in media que- 
ries or class changes via simple JavaScript that changes the appropriate prop- 
erty values. 
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Differences 


Let’s switch gears and think about the differences. Although both transitions 
and animations can run in response to a trigger, only animations can run auto- 
matically on page load. Transitions require a trigger to run. If you need your 
animation to run automatically, you have only one choice. 


Transitions are limited to initial and final state keyframes. Animations can 
build as many intermediate keyframes as necessary or desired. This gives you 
more control over your animation and allows you to create more complex and 
sophisticated animations. Transitions are for simple animations. 


Transitions don't change properties. You set values up front in the CSS intrin- 
sic to the specific elements. Transitions define the change only between prop- 
erty values and not the values themselves. Animations can change property 
values inside each keyframe. The values don't need to be declared outside the 
animation either, making animation more dynamic. 


Transitions can’t loop. They run once when triggered and then run in reverse 
when the trigger is removed. Otherwise they don’t run. You can loop anima- 
tions as many times as you want and set them to run in reverse or alternate 
between forward and reverse. Once again CSS animations offer you more con- 
trol than CSS transitions. 


Once you start using JavaScript to further control your transitions and ani- 
mations, it quickly becomes clear that transitions are easier to work with. It’s 
more difficult making changes to the values inside keyframes than it is the 
intrinsic values on elements. 


As a general rule, you'll write more code using CSS animations as opposed to 
CSS transitions, assuming both are trying to do the same thing. 


When you get down to it, animations are abstractions of transitions. States are 
pulled out from the specific case to work in a more modular fashion. Tran- 
sitions are a specific case of the more general animation. If you find yourself 
using the same transition code over and over, you might decide to rewrite it 
as an animation. 
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Choosing Transitions or Animations 


If what you want to create is a simple animation between two states, keep your 
code simpler and lighter, or use JavaScript in the animation, then transitions 
are probably a better choice. 


If what you want to create is going to be something more complex with a need 
for more than two states or if your animation needs to loop or run in either 
direction and start itself, animations are your choice. 


In general, choose CSS transitions for simple animation that require less con- 
trol, but better integration with JavaScript. Choose CSS animations for more 
complex and flexible animations that offer you greater control. 


There's one question in regard to transitions and animations you might still 
be wondering about: Does one perform better than the other? To answer that 
question, let’s look at performance. 


Performance 


The short answer is that you shouldn't see any performance difference between 
transitions and animations, assuming both are doing the same thing in the same 
way. Performance has more to do with what properties are being changed as 
opposed to whether those changes happen through transitions or animations. 


To render webpages, a browser first calculates the CSS styles that apply to the 
HTML elements. Then it lays out the page by working through the geometry 
and position for each element. Next comes painting where pixels are filled in 
before finally drawing everything to the screen on composite layers. Browsers 
use two different execution threads to do all these things and render webpages: 
the main thread and the compositor thread. 


The main thread is responsible for laying out pages and painting elements. It 
computes the CSS styles applied to HTML elements, and it runs JavaScript. 
The compositor thread draws bitmaps to the screen via the graphic processing 
unit (GPU). It determines which parts of the page are visible or will soon be 
visible. It determines what's likely to be scrolled to next and moves the parts 
of the page when someone does scroll. Both threads communicate with each 
other, sending and requesting information. 
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The main thread tends to be busier for longer periods of time, and while busy 
it’s not responsive to input. The compositor thread, on the other hand, tries to 
remain responsive because it has to be aware of scrolling. 


Main thread responsibilities are more CPU intensive, while compositor respon- 
sibilities look to the GPU more frequently. GPUs can draw the same bitmaps 
over and over in different positions quickly. They can scale and rotate bitmaps 
quickly as well. 


To create more performant animations, you generally want to stay away from 
layout and painting changes and instead make compositing changes. Com- 
positing changes can be made on separate compositing layers, so the browser 
doesn't need to repaint or rework the layout of other layers. 


TABLE 4.1 lists CSS properties that affect layout and painting. 


It turns out that there are currently five things browsers can animate cheaply 
in terms of performance: translation, scale, rotation, opacity, and some CSS 
filters. The first three should have you thinking back to transforms. Anything 
beyond animating these five types of properties probably wont run as smooth. 


Consider moving an element to a new location, which is something you've 
done a few times throughout this book. You can use a transform to move the 
element, or you can adjust properties like top and left. The former uses the 
GPU, while the latter uses the CPU. You want to take advantage of the GPU 
where possible and take advantage of the hardware acceleration it provides. If 
you think back to the first example in this chapter, you moved an element by 
adjusting its Left value and then by applying a translation transform. The 
approach using translation ran smoother, and this is why. 


It won't matter whether you use CSS transitions or CSS animations when it 
comes to performance, but you should think about performance when creat- 
ing either. Transforms, opacity, and some CSS filters don't require layout or 
painting changes and so are preferred properties for animating. 


This doesn’t mean you shouldn't animate other properties. You can still cre- 
ate a smooth animation with other properties. Just realize that if you have the 
choice, you should opt for changing a transform, opacity, or CSS filter instead 
of another property. 


TABLE 4.1. CSS PROPERTIES 
PROPERTIES THAT AFFECT LAYOUT 
width 

height 

padding 

margin 

display 
border-width 
border 

top 

position 
font-size 
float 
text-align 
overflow-y 
font-weight 
overflow-y 
left 

right 
font-family 
line-height 
vertical-align 
clear 
white-space 
bottom 


min-height 
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PROPERTIES THAT AFFECT PAINTING 
color 

border-style 
border-radius 
visibility 
background 
text-decoration 
background-size 
background-image 
background-position 
background-repeat 
outline-color 
outline 
outline-style 
outline-width 


box- shadow 
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Summary 


In time, you can expect browsers to make more CSS properties quicker to 
animate. For now, do what you can with what you have. You have enough 
control over both transitions and animations to animate many CSS proper- 
ties smoothly and create more realistic-looking animations, which brings us 
to the next chapter. 
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Symbols 


* (asterisk), 47 
@keyframes rule 
defining and using, 101-104 
naming with animation-name property, 
104-105 
opening and closing sidebar navigation with, 
249-254 
squash and stretch, 155-157 


A 


absolute positioning, 284 
accelerating/decelerating transitions, 68-78 
ease curves, 74 
ease-in curves, 76 
ease-out curves, 77 
linear curves, 75 
actions 
adding anticipation to, 159 
follow-through and overlapping, 168-181 
overlapping and secondary action, 195-196 
staging, 165 
straight-ahead and pose-to-pose, 168 
triggering transitions with, 58 
all keyword, 62, 63 
alternating animation directions, 19 


animation, 93-146. See also animation-* properties; 


twelve principles of animation 
about, 93-94 
additional principles of, 208-209 
anticipation in, 158-164 
appeal in, 207-208 
arcs in, 182-195 
CSS positioning creating, 96-98 
defining with @keyframes rule, 101-104 
delaying, 125-127 
Disney’s 12 principles of, 148-149, 295-296 
ending, 105 
events in, 131-140 
exaggeration in, 197-206 
firing events, 131 
follow-through and overlapping action in, 
168-181 
importance in web design, 3-5, 289 
iteration counts for, 114-118 
JavaScript vs. CSS, 96 
keyframes for, 94 
looping, 114-118, 142, 143 
practicing, 290 


realistic, 147-148, 295 
resources on, 294-296 
restraint in, 197, 198, 209 
running and pausing, 122-125 
running forward or in reverse, 119-122 
secondary action in, 195-196 
slow in and slow out, 182 
smoothing, 72, 98-100 

solid drawing in, 206-207 
squash and stretch in, 149-158 
staging for, 164-167 

starting, 100, 106 


straight-ahead and pose-to-pose actions for, 168 


subtle transitions in, 5-6 
timing, 196-197 
transitions vs., 57, 94, 141-145, 217, 294 
trends in, 211, 289 
types of, 6-7 
uses for, 211 
using multiple, 100 
animation-* properties, 104-131 


adding to off-canvas sidebar navigation, 248-249 


animation-delay, 125-127 
animation-direction property, 119-122 
animation-fill-mode, 95, 128-131 
animation-iteration-count property, 
114-118 
animation-name, 104-106 
animation-play-state, 122-125 
animation-timing-function, 107-114 
animation-duration, 106-107 
shorthand animation property, 131 
animationend event, 132, 139 
animationiteration event, 132, 139 
animationstart event, 132, 139 
anticipation, 158-164 
appeal, 207-208 
arcs, 182-195 


B 


backface-visibility() property, 43-51 
background color transitions 

delaying, 79-81 

duration of, 66-68 

occurring when hovering, 60-61, 63-65 

progressive, 60-61 

step functions for timing changes in, 69-71 
:before and :after pseudo-elements, 58, 62 
body property, 212-213 


bounce animation 
adding arcs to, 182-195 
adding exaggeration to, 197-206 
applying solid drawing principle to, 206-207 
applying squash and stretch principle, 149-158 
creating anticipation in, 158-164 
follow-through and overlapping action for, 
168-181 
secondary actions and ball rotation in, 196 
slow in and slow out in, 182 
staging and context for, 164-167 
bounding box, 19-20 
box model 
adding padding to, 20 
CSS positioning to animate, 96-98 
generating DOM events after transitions in, 
84-87 
inheritance of transform-origin property in, 
18-19 
layouts in CSS animation, 11 
rotating, 14-16, 23 
starting/reversing transitions of, 82-83 
box-sizing: border -box property, 47, 212-213 
browsers. See also IE; Opera Mini 
animation support in, 95-96, 146 
applying transform matrix in, 26-28 
CSS transforms and transitions supported by, 
7-9 
deciding which to support, 287 
preventing Webkit browsers from running non- 
Webkit code, 257 
resources on, 292 
support and vendor prefixes for, 13, 55 
transition and animation performance in, 
143-144 
transition support by, 58, 92 
transitioning CSS animatable properties in, 89 
buttons 
changing text for sidebar navigation, 256-258 
modal window, 226-227 
triggering animation play with, 123-125 


Cc 
card flip 


adding to modal window, 234-235, 236, 239-240 


backface-visibility() property for, 43-51 
Cascading Style Sheets. See CSS 
character staging, 164 
child elements 
controlling 2-D or 3-D rendering of, 39-42 
creating new origin for, 18 
flattening, 39-42 


INDEX 


rendering in 3-D, 41 
rotating around parent’s div axis, 42 
click events in CSS, 231 
color. See also background color transitions 
adding to background, 19-20 
navigation bar background, 216-217 
setting modal window, 228-229 
containers 
adjusting perspective origin of, 37-39 
code for modal window, 226-227 
content switcher, 269-285 
combining transitions on different properties, 
285 
event listener for, 273-275 
implementing switch statements for, 275-276 
listening for page to complete loading, 273 
setting up HTML document for, 269-270 
sliding content block while modifying opacity 
and scale, 275-282 
styling window components of, 270-273 
coordinate space 
stacking contexts in, 30-31 
3-dimensional, 34 
2-dimensional, 12 
CSS (cascading style sheets) 
adding multiple transforms to elements, 29-30 
animatable properties available for transitions, 
89-91 
browser support for, 9 
choosing transitions or animations, 143 
click events in, 231 
CSS Shapes Module in future, 11 
differences in transitions and animations, 142 
overriding preserve -3d value in, 40 
polyfills for unsupported, 7-9 
properties affecting layout and painting in, 
144, 145 
similarities in transitions and animations, 141 
transformations using, 7 
2-dimensional coordinate space for, 12 
updated lists of animatable properties, 91 
usefulness of JavaScript with, 288 
using animations in JavaScript or, 96 
visual formatting model for, 11-12 
CSSSandpaper polyfill, 13 
cubic Bézier curves, 69, 72-78 
defining, 72-73 
ease curves, 74 
ease-in curves, 76 
ease-in-out curves, 78 
ease-out curves, 77 
keywords for, 73, 74-78 
linear curves, 75 
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D 


decelerating transitions. See accelerating/decelerating 
transitions 

delaying 

animations, 125-127 

transition starts, 79-81 
depth cues, 4-5 
detecting browser support, 95 
Disney Animation (Johnston and Thomas), 148 
Disney, Walt, 148-149 
Drawn to Life (Stanchfield and Hahn), 208 
drop-down menu for navigation bar, 218-223 
duration of transitions, 66-68 


E 
easing 
ease curves, 74 
ease-in curves, 76, 107-111 
ease in/out animation principle, 182 
ease-in-out curves, 78 
ease-out curves, 77 
effects. See also transforms; transitions 
resources on, 296-297 
elements. See also child elements; pseudo-elements 
adding multiple transforms to, 29-30 
applying multiple transitions to, 62-63, 92 
delaying start of transitions, 79-81 
moving to different location, 21-22 
numeric values when making smaller, 23 
scaling, 22-23 
setting transition duration for, 66-68 
step functions for timing transitions in, 69-71 
translating to different location, 21-22, 52 
ending animations, 105, 132, 139 
environment for staging, 164-165 
event listeners 
adding for animation events, 137, 138, 139-140 
adding JavaScript, 84 
setting up for content switcher, 273-275 
events 
buttons triggering animation, 123-125 
listening for animation, 136, 137-138, 139-140 
resources on, 293, 294 
transitions firing, 84, 92 
types of animation, 131-140 
exaggeration, 197-206 
example code. See also bounce animation; and specific 
examples 
content switcher, 269-285 
how to use, 212-213 
modal windows, 224-241 
navigation bar, 213-223 


off-canvas sidebar navigation, 242-268 
squash and stretch, 150-158 


F 


Flash animation, 7 
flat value for transform-style property, 39 
follow-through, 168-181 
forms, 227-228 
functions 
cubic Bézier curves, 69, 72-78 
distinguishing 2-D and 3-D, 52 
matrix(), 25-28 
matrix3d(), 53-54 
rotate(), 23, 52 
scale(), 22-23, 52 
skew(), 24 
step, 69-71 
3-dimensional, 52-54 
translate(), 21-22, 52 
2-dimensional transform, 21-28 
using multiple transform, 29-30 


H 


Hahn, Don, 208 
hiding/showing 
front card face, 46 
previously defined @key frames rule, 103 
submenu with opacity, 219-221 
hovering 
adding animation-name to elements in 
:hover state, 106 
changing background color when, 60-61, 63-65 
reversing transitions when removed, 91-93 
HTML 
animation using dynamic, 6-7 
code for modal windows, 225-226 
drop-down menu code in, 218 
setting up content switcher document in, 
269-270 
structuring off-canvas sidebar navigation, 
243-246, 260-261 


icons for menu items, 247 

IE (Internet Explorer) 
converting CSS transforms to filters in, 13 
transitions using, 58 
window. getComputedStyle workaround for, 

256 

workarounds for inline-block method, 216 
workaround for preserve -3d, 42 


inheritance for trans form-origin property, 18-19 
inline-block method, 215-216 


J 


JavaScript 
adding event listeners, 84 
animation using, 7 
changing animation-name property for 

off-canvas sidebar, 254-257 

converting transforms to IE filters with, 13 
examples used in transform code, 14 
finding libraries for animation, 95-96 
listening for animation events, 137, 138, 139-140 
polyfills for unsupported CSS, 7-9 
transitions and ease of control in, 142 
usefulness of, 288 
using animations in CSS or, 96 

Johnston, Ollie, 148 

jQuery, 95 


K 


keyframes. See also @keyframes rule 
animation, 94 
applying animation-timing-function 

between, 107 

creating anticipation with, 158-164 
defined, 101 
defining with @keyframes rule, 101-104 
overriding timing functions in, 111, 113, 114 
placement of transitions and animations in, 142 
resetting property values in, 100 
setting up timing with, 197 

keywords 
all, 62 
animation-fill-mode, 128 
Bézier curve, 73, 74-78 
perspective-origin, 37 
transform-origin, 17 


L 


layers of design needs, 2-3, 288 
laying out pages, 143-145 
length values in perspective property, 34 
libraries for JavaScript animation, 95-96 
linear curves, 75 
links for navigation bar, 214-217 
list items 
adding for drop-down menu, 218 
displaying horizontally, 215 
selecting, 215-216 
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looping 
animations, 114-118, 142, 143 
unavailable with transitions, 142 


M 


matrix math, 25-26, 29 
matrix() function, 25-28 
matrix3d() function, 53-54 
measurements in translate() function, 22 
mobile device navigation, 243 
modal windows, 224-241 
adding card flip to, 234-235, 236 
code for opening/closing overlay, 229-231 
container and button code for, 226-227 
debate over, 224 
form labels for, 227-228 
HTML code for, 225-226 
illustrated, 224-225 
moving offscreen, 232-234 
scaling to final size, 236-237 
setting color and opacity for, 228-229 
shrinking, 237-239 
using multiple transitional effects in, 239-240 
motion. See animation 
moving elements to different location, 21-22 
ms vendor prefix, 5, 13 
multiple animations, 100 


N 


naming transform property, 16 
navigation. See navigation bar; off-canvas sidebar 
navigation 
navigation bar, 213-223 
drop-down menu for, 218-223 
illustrated, 213 
links for, 214-216 
selecting list items from, 215-216 
setting background color for, 216-217 
setting up horizontal elements for, 215 
nested transforms, 28 
numbers 
about matrices, 25-26 
values for making elements smaller, 23 


O 


objects 
applying principle of solid drawing to, 206-207 
arcs and motion of, 182-183 
rotating around axis, 23 
setting origin of transformed, 16-20 
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objects (continued) perspective property 
skewing, 24 about, 55 
slow in and slow out of, 182 setting up 3-dimensional look with, 34-37 
squashing and stretching, 149-158 polyfills 
staging characters and, 164 applying transitions in IE with, 58 
visibility of back side of transformed, 43-51 resources on, 292 
off-canvas sidebar navigation, 242-268 Transformie and CSSSandpaper, 13 
adding animation-* properties to, 248-249 pose-to-pose action, 168 
@keyframes rules for opening/closing, 249-254 positioning 
HTML code for layout, 243-244 animating box model with CSS, 96-98 
icons for menu items, 247 relative, 285 
JavaScript changing animation-name property, using absolute, 284 
254-257 practicing animation principles, 290 
layout for four divs, 244-247 preserve value for transform-style property, 
open and closed, 242 39, 40, 42 
preventing Webkit browsers from running non- progressive enhancement 
Webkit code, 257 designing with, 243, 288-289 
second version of, 259-268 suggestions for sidebar navigation, 259 
suggested enhancements for, 259 properties 
opacity affecting layout and painting, 144, 145 
changing as content block slides outside window, applying values to completed animations, 128 
280 CSS animatable, 89-91 
combining with scaling effect, 277-279 effect of transitions and animations on, 142 
hiding/showing elements used by browsers, 229 resources on animatable, 294 
hiding/showing submenu with, 219-221 setting different values for multiple animation, 100 
setting modal window, 228-229, 231-232 setting values on transition-*, 92 
transition for changing, 231-232 3-dimensional transform, 34-52, 55 
opening/closing modal window overlay, 229-231 2-dimensional transform, 16-20, 55 
Opera Mini using asterisk in, 47 
oTransitionEnd event, 84 pseudo-elements 
transforms with, 13 :before and :after, 58, 62 
transitions using, 58 support for, 95 
overlapping action, 181, 195-196 
overriding R 


@keyframes rule, 103 
preserve -3d value, 40 
timing functions in keyframes, 111, 113, 114 


realistic animation, 147-148, 295 
relative positioning, 285 

rendering child element in 3-D, 41 
resizing. See scaling 


P resources 

padding for bounding box, 20 animation, 294-295 

painting elements, 143-145 browser support, 292 

parent elements detecting browser support, 95 
flattening child element on, 39-42 effects, 296-297 
rendering child element in 3-D, 41 performance, 294-295 
rotating child around parent's div axis, 42 polyfills, 292 

performance realistic animation, 295-296 
resources on, 294-295 transform matrix, 293 
of transitions and animations, 143-144, 217 transforms, 292 

perspective function, 53 transitions, 293-294 

perspective-origin property, 37-39 transitions vs. animations, 294-295 


twelve principles of animation, 295-296 
updated lists of animatable properties, 91 


user interface design, 296 

visual formatting model, 293 
restraint in animation, 197, 198, 209 
reversing 

animations, 119-122 

transitions, 82-83 

transitions when hovering stopped, 91-93 
rotate() function, 23, 52 
rotations 

around origin point, 18-19 

bounding box, 19-20 

2-D box, 14-16, 23 

using 3-dimensional perspective, 36 
running and pausing animations, 122-125 


S 


scale() function, 22-23, 52 
scaling 
modal window to final size, 236-237, 239-240 
shrinking modal windows, 237-240 
transform for squash and stretch animation, 
153-158 
using scale() function, 22-23 
secondary action, 195-196 
shrinking modal windows, 237-240 
skeuomorphic realism, 211, 289 
skewing objects, 24 
sliding 
content block while changing opacity, 280 
modal window as it becomes opaque, 232-234, 
239-240 
modifying content block opacity and scale while, 
275-282 
off-canvas sidebar on/off canvas, 259-268 
smoothing animation for, 98-100 
submenu offscreen, 221-222 
using CSS positioning in, 96-98 
smoothing animation, 98-100 
solid drawing, 206-207 
squash and stretch, 149-158 
stacking contexts, 30-31 
staging, 164-167 
Stanchfield, Walt, 208 
starting animations, 100, 106 
states, animation, 142 
step functions, 69-71 
straight-ahead action, 168 
syntax 
adding values in step functions, 69 
transitioning multiple properties, 62, 81 
using asterisk in properties, 47 
writing multiple transforms, 29-30 
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:target hack, 231 
Thomas, Frank, 148 
3-D CSS transforms, 33-52 
about, 33-34 
backface-visibility() property for, 43-51 
browser support for, 7, 8 
coordinate space for, 34 
distinguishing functions in 2-D and, 52 
functions for, 52-54 
IE support for, 13 
perspective-origin property for, 37-39 
perspective property for, 34-37 
properties for, 34-52, 55 
rotations in 2-D vs., 36-37 
transform rendering model for, 30-33 
timing 
animations, 107-114 
applying ease-in-out, 187 
overlapping actions with different, 181, 195-196 
playing in reverse, 119-122 
principle of animation, 196-197 
resources on, 293 
secondary actions, 195-196 
step functions in background color changes, 
69-71 
transitions, 68-78 
transform matrices 
math for, 25-26 
matrix() function for, 25-28 
matrix3d() functions for, 53-54 
order in, 29 
resources on, 293 
transform-origin property 
inheritance and, 18-19 
perspective-origin property vs., 37, 38 
setting values for, 16-20 
transform property 
about, 14, 55 
naming, 16 
using perspective function with, 53 
transform-style property, 39-42 
Transformie polyfill, 13 
transforms, 11-55. See also 3-D CSS transforms; 
transform matrices; 2-D CSS transforms 
about CSS visual formatting model, 11-12 
adding multiple transforms to elements, 29-30 
browser support and vendor prefixes for, 13, 55 
converting to IE filters with JavaScript, 13 
creating 2-D rotation, 14-16 
functions for 2-D, 21-28 
nested, 28 
resources on, 292 
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transforms (continued) 
setting fixed point for object, 16-20 
transform rendering model for 2- and 3-D, 
30-33 
used during arcing of bouncing ball, 194 
working with, 55-56 
transition-* properties 
checking mismatched vendor prefixes in, 68 
setting values on, 92 
transition-delay property, 79-81 
transition-duration property, 66-68 
transition-property, 62-65 
transition-timing-function, 68-78 
using shorthand transition property, 81 
transitionend event values, 84 
transitions, 57-92. See also background color 
transitions; transition-* properties 
about, 5-6, 57-58, 92 
accelerating and decelerating, 68-78 
adding multiple transitions to elements, 62-63, 
81, 92 
adding to background color, 217 
animatable property resources, 294 
animations vs., 57, 94, 141-145, 217, 294 
browser support for, 58, 92 
CSS animatable properties for, 89-91 
DOM events generated by, 84-88 
example code for, 59-62, 63-65 
resources on, 293-294 
shorthand method for, 81 
starting and reversing, 82-83 
transition event resources, 293 
types of animation for, 6-7 
using with drop-down menu, 218-223 
translate() function, 21-22, 52 
trends in animation, 211, 289 
triggering animation play with buttons, 123-125 
twelve principles of animation 
about, 209-210 
additional principles, 208-209 
anticipation, 158-164 
appeal, 207-208 
arcs, 182-195 
exaggeration, 197-206 
follow-through and overlapping action, 168-181 
overview, 148-149 
practicing animation principles, 290 
resources on, 295-296 
secondary action, 195-196 
slow in and slow out, 182 
solid drawing, 206-207 
squash and stretch, 149-158 


staging, 164-167 
straight-ahead and pose-to-pose actions, 168 
timing, 196-197 


2-D CSS transforms, 14-33 
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browser support for, 7, 8 

coordinate space for, 12 

distinguishing functions in 3-D and, 52 
functions for, 21-28 

IE support for, 13 

properties for, 16-20, 55 

rotating box, 14-16 

3-D rotations vs., 36-37 

transform rendering model for, 30-33 


underscore hack, 216 
user interface design 


Vv 


animation as guide in, 289 

animation in, 208, 209, 289 

resources on, 296 

user expectations of forward and reverse 
transitions, 83 


values 


adding for step functions, 69 

applying to completed animations, 128 

overriding preserve -3d, 40 

resetting inside keyframes, 100 

setting for transition-* properties, 92 

using different values for multiple animation 
properties, 100 


visibility, 3-D backface, 43-51 
visual formatting model, resources on, 293 
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webkit vendor prefix 


browser support and, 13, 15 

checking mismatches in transition-* 
properties, 68 

transitions and, 58 

webkitTransitionEnd event, 84 


website design 


about transitions, 5-6 

animation in, 3-5, 208, 209, 289 
choosing browsers to support, 287 
hierarchy of needs in, 2-3, 288 
progressive enhancement in, 243, 259, 288-289 
trends in, 211, 289 


